/*
 * @Description: 增加、编辑排序字段表单组件
 * @Author: Rfan
 * @Date: 2022-06-05 17:10:32
 * @LastEditTime: 2022-06-05 17:27:15
 */

import { Form, Input, Radio, Select, Space, Typography } from 'antd';
import type { IMetadata } from '@/interfaces/metadata';

const { Option } = Select;

interface IFormItem {
  fieldList: IMetadata[];
}

const FormItem = (props: IFormItem) => {
  const { fieldList } = props;

  return (
    <>
      <Form.Item
        name="fieldId"
        label="字段名称"
        rules={[{ required: true, message: '请填写字段名称' }]}
      >
        <Select placeholder="请选择字段名称">
          {fieldList.map((field: any) => (
            <Option key={field.id} value={field.id}>
              {field.field_desc}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item name="sortType" label="排序方式">
        <Radio.Group className="radio-with-desc">
          <Space direction="vertical">
            <div>
              <Radio value={1}>降序</Radio>
              <Typography.Text type="secondary">
                （数据从大到小，英文、中文“按拼音”按字母表【倒序】）
              </Typography.Text>
            </div>
            <div>
              <Radio value={0}>升序</Radio>
              <Typography.Text type="secondary">
                （数字从小到大，英文、中文“按拼音”按字母表【顺序】）
              </Typography.Text>
            </div>
          </Space>
        </Radio.Group>
      </Form.Item>
      {/* <Form.Item name="sortNo" label="排序优先级">
        <Input type="number" />
      </Form.Item> */}
      <Form.Item name="comment" label="排序备注">
        <Input.TextArea placeholder="" showCount maxLength={2000} />
      </Form.Item>
    </>
  );
};

export default FormItem;
